<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">

    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-header style="background-color: #0095d7;text-align: center">
        <h1 style="color: white;font-size: 22px">
            疫情工作管理页面
        </h1>
    </el-header>
        <el-descriptions class="margin-top" title="修改领导信息" :column="3" size="" border>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    领导姓名
                </template>
                <input type="text" placeholder="输入姓名" v-model="leader.name">
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    性别
                </template>
                <el-radio v-model="leader.gender" label="1">男</el-radio>
                <el-radio v-model="leader.gender" label="2">女</el-radio>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    组织名称
                </template>
                <input type="text" placeholder="输入组织名称" v-model="leader.organization">
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    职务
                </template>
                <input type="text" placeholder="输入职务" v-model="leader.job">
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    联系电话
                </template>
                <input type="text" placeholder="输入电话" v-model="leader.contactNumber">
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    辖区
                </template>
                <input type="text" placeholder="输入辖区" v-model="leader.location">
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    备注
                </template>
                <el-input
                        type="textarea"
                        autosize
                        placeholder="请输入内容"
                        v-model="leader.remarks">
                </el-input>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    照片
                </template>
                <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        list-type="picture">
                    <el-button size="small" type="primary" v-model="leader.url">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

                </el-upload>

            </el-descriptions-item>

            <template slot="extra" >
                <el-button type="primary" size="small" @click="updateLeader()">修改</el-button>
            </template>


        </el-descriptions>

</div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {

            return {
                leader:{id:"",name:"",gender:"",organization:"",job:"",contentNumber:"",location:"",remarks:"",url:""},
                joblist:["1","2"],
                fileList:[]




            }



        },
        methods: {

            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },updateLeader(){
                v.leader.id=location.search.substring(location.search.lastIndexOf("=")+1)
                axios.post("/evil/leader/update",v.leader).then(function () {

                    location.href="index.html";
                })
            }


        },
        created:function (){

        }

    })
</script>
</html>